<template>
  <yt-page title="专家库" :rightData="rightData">
    <yt-group :group="false" :searchApi="searchApi" ref="group">
      <yt-cell slot-scope="user" :label="user.Name" isLink @click="goDetailPage(user.id)"></yt-cell>
    </yt-group>
    <yt-popup pos="right" v-model="search" :mask="true" slot="alert">
      <yt-page class="page" :flex="true" :leftData="[]" title="按类别查询">
        <yt-form style="background-color: #fff">
          <yt-inlineSelect v-model="selectedList" :list="TABS" :x="2" label="D_text" val="D_code" multiple></yt-inlineSelect>
          <yt-btn-group slot="btn" :shadow="false">
            <yt-btn theme="white" @click="search = false">关闭</yt-btn>
            <yt-btn @click="onSearch(selectedList)">确定</yt-btn>
          </yt-btn-group>
        </yt-form>
      </yt-page>
    </yt-popup>
  </yt-page>
</template>

<script>
  import {commonApi} from "@/common/api/commonApi.js"
  import _ from 'lodash'

  const TABS = [
    {
      D_code: '1',
      D_text: '隐患排查专家'
    },
    {
      D_code: '2',
      D_text: '应急救援专家'
    },
    {
      D_code: '3',
      D_text: '标准化评审类专家'
    },
    {
      D_code: '4',
      D_text: '安全培训专家'
    },
    {
      D_code: '5',
      D_text: '事故调查专家'
    },
    {
      D_code: '6',
      D_text: '重大隐患鉴定专家'
    }
  ]
  export default {
    data() {
      return {
        TABS,
        search: false,
        rightData: [{
          font: 'yt-icon yt-icon-search',
          click: () => {
            this.search = !this.search
          }
        }],
        selectedList: [],
        searchApi: async ({skip, limit}) => {
          let param = {}
          if (!this.selectedList.length) {
            param = { skip, limit }
          } else {
            param = { skip, limit, containedIn: { state: this.selectedList } }
          }
          let items = await commonApi.search('GO_security', param)
          return items
        }
      }
    },
    methods: {
      goDetailPage(id) {
        this.$router.$push({path: '/professional/detail', query: {id: id}})
      },
      onSearch () {
        this.search = false
        this.$refs.group.startPull()
      }
    },
    activated () {
      this.onSearch()
    }
  }
</script>
